${require('./_head.html') title="Tables" description="Default styles for tables without .classes" canonical="tables.html" } ${require('./_nav.html')}
${require('./_sidebar.html') active="tables-link"}

Tables

Default styles for tables without .classes

# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# Total Total Total Total Total 
<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Heading</th>
      <th scope="col">Heading</th>
      <th scope="col">Heading</th>
      <th scope="col">Heading</th>
      <th scope="col">Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="col">#</th>
      <td scope="col">Total</td>
      <td scope="col">Total</td>
      <td scope="col">Total</td>
      <td scope="col">Total</td>
      <td scope="col">Total</td>
    </tr>
  </tfoot>
</table>

role="grid" enable striped rows.

# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell 
<table role="grid">
  …
</table>
${require('./_footer.html')}